<template>
  <div>
    <el-form :inline="true" :model="CarVo" class="demo-form-inline" style="float: left">
      <el-form-item>
        <el-input v-model="CarVo.name" placeholder="会员姓名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="refresh">刷新</el-button>
      </el-form-item>
    </el-form>
    <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            >
      <el-table-column
              fixed
              prop="name"
              label="会员姓名"
              width="200">
      </el-table-column>
      <el-table-column
              prop="changeType"
              label="积分变化"
              width="150"
      >
        <template slot-scope="scope">
          <p v-if="scope.row.changeType == 1" style=" color:#409eff">增加</p>
          <p v-else-if="scope.row.changeType == 2" style="color: crimson">减少</p>
        </template>
      </el-table-column>
      <el-table-column
              fixed
              prop="changeCount"
              label="积分改变数量"
              width="150">
      </el-table-column>
      <el-table-column
              fixed
              prop="operateMan"
              label="操作人员"
              width="100">
      </el-table-column>
      <el-table-column
              prop="operateNote"
              label="操作备注"
              width="200">
      </el-table-column>

      <el-table-column
              prop="sourceType"
              label="积分来源"
              width="200"
      >
        <template slot-scope="scope">
          <p v-if="scope.row.sourceType == 0">自驾服务消费金额</p>
          <p v-else-if="scope.row.sourceType == 1">参与官方活动</p>
          <p v-else-if="scope.row.sourceType == 2">官网或者app顶专车或者个人消费后</p>
        </template>
      </el-table-column>
      <el-table-column
              prop="createTime"
              label="记录时间"
              width="200">
      </el-table-column>

    </el-table>
    <div class="block">
      <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
  export default {
    name: "IntegrationHistory",
    created() {
      this.initTable();
    },
    mounted() {
      this.token=window.localStorage.getItem("token")
    },
    computed:{
      headerObj(){
        return{
          token:this.token
        }
      }
    },

    methods: {
      refresh(){
        this.CarVo = {};
        this.currentPage = 1;
        this.pageSize = 5;
        this.initTable();
      },
      handleSizeChange(val) {
        this.pageSize=val;
        this.initTable();
      },
      handleCurrentChange(val) {
        this.currentPage=val;
        this.initTable();
      },


      initTable(){
        this.$http.post("/member/aps/list?currentPage="+this.currentPage+"&pageSize="+this.pageSize,this.CarVo).then(result=>{
          this.tableData=result.data.data.list;
          this.total=result.data.data.total;
          console.log(result)
        })
      },
      onSubmit(){
        this.initTable();
      },

    },

    data() {
      return {
        tableData: [],
        CarVo:{},
        currentPage:1,
        pageSize:5,
        total:0,
        token:'',

      }
    }
  }
</script>
<style scoped>
</style>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
</style>